<!--
 * @Description: 
 * @Autor: ZachGmy
 * @Date: 2021-06-23 14:33:40
 * @LastEditors: ZachGmy
 * @LastEditTime: 2021-06-23 16:21:16
-->
<template>
  <div>
    <!-- 插值语法 -->
    <!-- 如何将data中的数据渲染在页面中 html中 -->
    <!-- 使用插值语法将data中的数据渲染在页面中 html中 -->
    <!-- <div>{{ msg }}{{ msg }}</div> -->
    <!-- 简单的运算操作 也可以在插值语法中进行 -->
    <!-- <div>{{ count * 2 }}</div> -->
    <!--  -->
    <!-- <div>{{ tHtml }}</div> -->
    <!-- <div v-html="tHtml"></div> -->

    <!-- 动态绑定属性 -->
    <!-- <a v-bind:href="aHref">百度一下，你就知道</a> -->
    <!-- <img v-bind:src="imgUrl" alt="" /> -->
    <!-- 动态绑定属性 语法糖 -->
    <!-- <a :href="aHref">百度一下，你就知道</a> -->

    <!-- 动态绑定class 对象语法 -->
    <!-- <div :class="{ active: isActive }">{{ msg }}</div>
    <button @click="toggle">切换</button> -->

    <!-- vue中的条件判断  -->
    <!-- 根据分数得到一个评级 -->
    <!-- <div v-if="score >= 90">优秀</div>
    <div v-else-if="score >= 80">良好</div>
    <div v-else-if="score >= 60">及格</div>
    <div v-else>不及格</div> -->

    <div v-if="isShow">我是v-if控制的</div>
    <div v-show="isShow">我是v-show控制的</div>
    <button @click="toggle2">toggle2</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 70,
      msg: "Hello Vue",
      count: 10,
      tHtml: '<a href="https://www.tencent.com">百度一下，你就知道</a>',
      aHref: "https://www.tencent.com",
      imgUrl: "https://t7.baidu.com/it/u=2511982910,2454873241&fm=193&f=GIF",
      isActive: false,
      isShow: true,
    };
  },
  methods: {
    // 通过异步请求 拿到页面中想要使用的数据
    // 实现点击
    toggle() {
      // 获取到data中的isActive
      this.isActive = !this.isActive;
    },
    toggle2() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

<style scoped>
/* 通过类选择器 设置一下样式 */
.active {
  color: red;
}
</style>